<input type="hidden" id="node-input-version" />
<input type="hidden" id="node-input-inputs" />
<input type="hidden" id="node-input-outputs" />

<!-- Name -->
<div class="form-row">
    <label for="node-input-name" data-i18n="trigger-state.label.name"></label>
    <input type="text" id="node-input-name" />
</div>

<!-- Server -->
<div class="form-row">
    <label
        for="node-input-server"
        data-i18n="trigger-state.label.server"
    ></label>
    <input type="text" id="node-input-server" />
</div>

<div class="form-row">
    <div id="entity-list"></div>
</div>

<!-- Constraints List -->
<div class="form-row">
    <ol id="constraint-list"></ol>
</div>

<!-- Output List -->
<div class="form-row">
    <ol id="output-list"></ol>
</div>

<div class="form-row checkbox-option-left">
    <input type="checkbox" id="node-input-outputInitially" />
    <label
        for="node-input-outputInitially"
        data-i18n="trigger-state.label.output_on_connect"
    ></label>
</div>

<div class="form-row checkbox-option-left">
    <input type="checkbox" id="node-input-enableInput" />
    <label
        for="node-input-enableInput"
        data-i18n="trigger-state.label.enable_input"
    ></label>
</div>

<div class="form-row checkbox-option-left">
    <input type="checkbox" id="node-input-debugEnabled" />
    <label
        for="node-input-debugEnabled"
        data-i18n="trigger-state.label.show_debug"
    ></label>
</div>

<div id="constraint-template" style="display: none">
    <!-- Target Selection -->
    <div class="editable-list-row">
        <!-- Type -->
        <select type="text" class="target-type" style="width: 140px">
            <option
                value="this_entity"
                data-i18n="trigger-state.label.target_value_option.this_entity"
            ></option>
            <option
                value="entity_id"
                data-i18n="trigger-state.label.target_value_option.entity_id"
            ></option>
        </select>

        <!-- Value -->
        <input type="text" class="target-value" disabled />
    </div>
    <!-- Property Selection -->
    <div class="editable-list-row">
        <!-- Type -->
        <select type="text" class="property-type" style="width: 140px">
            <option
                value="current_state"
                data-i18n="trigger-state.label.target_type_option.current_state"
            ></option>
            <option
                value="previous_state"
                data-i18n="trigger-state.label.target_type_option.previous_state"
            ></option>
            <option
                value="property"
                data-i18n="trigger-state.label.target_type_option.property"
            ></option>
        </select>

        <!-- Value -->
        <input type="text" class="property-value" disabled />
    </div>

    <!-- Comparator Selection -->
    <div class="editable-list-row">
        <!-- Type -->
        <select type="text" class="comparator-type" style="width: 140px">
            <option
                value="is"
                data-i18n="trigger-state.label.comparator_option.is"
            ></option>
            <option
                value="is_not"
                data-i18n="trigger-state.label.comparator_option.is_not"
            ></option>

            <option
                value=">"
                data-i18n="trigger-state.label.comparator_option.greater_than"
            ></option>
            <option
                value=">="
                data-i18n="trigger-state.label.comparator_option.greater_than_or_equal_to"
            ></option>
            <option
                value="<"
                data-i18n="trigger-state.label.comparator_option.less_than"
            ></option>
            <option
                value="<="
                data-i18n="trigger-state.label.comparator_option.less_than_or_equal_to"
            ></option>

            <option
                value="includes"
                data-i18n="trigger-state.label.comparator_option.includes"
            ></option>
            <option
                value="does_not_include"
                data-i18n="trigger-state.label.comparator_option.does_not_include"
            ></option>
        </select>

        <!-- Value -->
        <input type="text" class="comparator-value" style="width: 65%" />
    </div>
</div>

<div id="output-template" style="display: none">
    <div class="editable-list-row">
        <!-- Type -->
        <select type="text" class="message-type" style="width: 140px">
            <option
                value="default"
                data-i18n="trigger-state.label.message_value_option.default"
            ></option>
            <option
                value="custom"
                data-i18n="trigger-state.label.message_value_option.custom"
            ></option>
            <option
                value="payload"
                data-i18n="trigger-state.label.message_value_option.custom_payload"
            ></option>
        </select>

        <input type="text" class="message-value" style="width: 62%" />
    </div>

    <!-- Output Comparator Selection -->
    <div class="editable-list-row">
        <select
            type="text"
            class="comparator-property-type"
            style="width: 140px"
        >
            <option
                value="always"
                data-i18n="trigger-state.label.comparator_property_value_option.always"
            ></option>
            <option
                value="current_state"
                data-i18n="trigger-state.label.comparator_property_value_option.if_state"
            ></option>
            <option
                value="previous_state"
                data-i18n="trigger-state.label.comparator_property_value_option.if_prev_state"
            ></option>
            <option
                value="property"
                data-i18n="trigger-state.label.comparator_property_value_option.if_property"
            ></option>
        </select>

        <input type="text" class="comparator-property-value" disabled />
    </div>

    <div class="editable-list-row">
        <!-- Type -->
        <select
            type="text"
            class="comparator-type"
            style="width: 140px"
            disabled
        >
            <option
                value="is"
                data-i18n="trigger-state.label.comparator_option.is"
            ></option>
            <option
                value="is_not"
                data-i18n="trigger-state.label.comparator_option.is_not"
            ></option>

            <option
                value=">"
                data-i18n="trigger-state.label.comparator_option.greater_than"
            ></option>
            <option
                value=">="
                data-i18n="trigger-state.label.comparator_option.greater_than_or_equal_to"
            ></option>
            <option
                value="<"
                data-i18n="trigger-state.label.comparator_option.less_than"
            ></option>
            <option
                value="<="
                data-i18n="trigger-state.label.comparator_option.less_than_or_equal_to"
            ></option>

            <option
                value="includes"
                data-i18n="trigger-state.label.comparator_option.includes"
            ></option>
            <option
                value="does_not_include"
                data-i18n="trigger-state.label.comparator_option.does_not_include"
            ></option>
        </select>

        <input type="text" class="comparator-value" style="width: 62%" />
    </div>
</div>

<div class="form-row" id="exposed-as-row">
    <label
        for="node-input-exposeAsEntityConfig"
        data-i18n="ha-tag.label.expose_as"
    ></label>
    <input type="text" id="node-input-exposeAsEntityConfig" />
</div>
